<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-13 17:01:46
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-03 09:26:07
 * @FilePath: \cxl-h5\src\components\watermark\Index.vue
-->
<template>
    <section class="watermark" ref="watermarkRef">
        <canvas id="watermark"></canvas>
    </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Watermark } from '.'

const watermarkRef = ref()

//整个容器的高度
const boxHeight = ref(0)
//屏幕的高度
const windowHeight = window.innerHeight

onMounted(() => {
    boxHeight.value = watermarkRef.value.offsetHeight
    console.log(watermarkRef, boxHeight.value, windowHeight)

    // new Watermark('watermark')
})
</script>

<style scoped lang="scss">
.watermark {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
    #watermark {
        display: block;
        width: 100%;
        height: auto;
    }
}
</style>
